<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="px-rem-index.js"></script>
	<link rel="stylesheet" href="index.css">
</head>
<body>
	<div id="app">
	<!-- 插槽 （必须）-->
	</div>
	<!-- 按钮 -->
	<button class='reset1'>复原</button>
	<!-- 引入拼图js -->
	<script src="./index.js"></script>		
	<script>
/**
 * @param {绑定渲染节点插槽（必填）}  el
 * @param {整体宽 单位rem（必填）}   width
 * @param {整体高 单位rem（必填） }   hieght
 * @param {   行数（必填）       }   row
 * @param {   列数（必填）       }   col
 * @param {   图片路径（必填）   }   puzzleImg
 * @param {绑定触发游戏开始结束按钮（选填）}   startBtn
 * @param {   初次渲染是否为默认为未开始状态(选填)  }   isReset
 * @param {   初始化完成后执行的回调(同步执行)(选填)  }   mounted
 * @param {    游戏成功后执行的回调(同步执行)(选填)   }   success
 * @param {    游戏拖拽每一步动画结束后会执行的回调(同步执行)(选填)   }   stepUpdate
 */
    var puzzle = new Puzzle({
        el:'#app',  //插槽
        data:{
            width:9,//宽
            height:9,//高
            row:3,         //行数
            col:3,          //列数
            puzzleImg:'https://img.hbhcdn.com/zhuanti/20881/pintu.jpg',
            startBtn:'.reset1',
            isReset:true//是否初始化为 待开始状态   判断游戏是否在进行中
        },
        mounted(){  //初始化完成后执行 同步执行
            var reset1 = document.querySelector('.reset1') ; 
            var isStart = reset1.classList.contains('oPuzzle_start');
            if(isStart){ 
                reset1.innerText ='自定义按钮--开始';
            }else {
                reset1.innerText ='自定义按钮--复原';
            } 
                //自定义初始化
            reset1.onclick=function(){
                var isStart = reset1.classList.contains('oPuzzle_start');
                if(isStart){ 
                    reset1.innerText ='自定义按钮--开始';
                }else {
                    reset1.innerText ='自定义按钮--复原';
                }
            }
        },
        stepUpdate(fromDom,toDom){//toDom 被交换的元素 , fromDom被拖拽的元素
            console.log(fromDom,toDom)
        },
        success(){// 拼图成功后的回调 同步执行
            document.querySelector('.reset1').innerText='自定义按钮--开始'
            alert('拼图成功,你实在是太棒了  ≧◠◡◠≦✌!!!')
        }         
    })

   
	</script>
</body>
</html>